<template>
  <div>
    <!-- 导航区 -->
    <nav class="nav">
      <router-link replace active-class="active" class="list-group-item" to="/home/news">News(新闻)</router-link>
      <router-link replace active-class="active" class="list-group-item" :to="{name:'xiaoxi'}">Message(消息)</router-link>
    </nav>
    <!-- 展示区 -->
    <div class="panel panel-body panel-primary">
      <!-- 用router-view占位 -->
      <keep-alive include="News">
      <!-- <keep-alive :include="['News','Message']"> -->
      <!-- <keep-alive exclude="Message"> -->
      <!-- <keep-alive :exclude="['News','Message']"> -->
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  export default {
    name:'Home'
  }
</script>

<style scoped>
  .nav {
    display: flex;
    margin-bottom: 10px;
  }
  .list-group-item {
    border-radius: 5px;
    margin-right: 5px;
  }
</style>